// 组件本身的生命周期钩子(常用)

import React, { Component } from 'react';

export default class componentUser extends Component {
    state = {
        count: 0
    }

    componentDidMount () {
        // 会在组件挂载后（插入 DOM 树中）立即调用
        // 一般用于发送网络请求等
        console.log('father: componentDidMount');
    }

    componentWillUnmount () {
        // 在组件卸载的时候调用, 一般用于清楚定时器等
        console.log('father: componentWillUnmount');
    }

    componentDidUpdate (prevProps, prevState) {
        // 该钩子在更新后会被立即调用。首次渲染不会执行此方法。
        // 避免 直接调用 setState()
        console.log(prevProps, prevState);
    }

    shouldComponentUpdate (nextProps, nextState) {
        console.log(nextProps, nextState, this.state);
        // 组件传递过来的props更新或者state更新,  根据值来确认返回值,  如果返回为true, 会执行render钩子
        return this.state.count !== nextState.count;
    }

    render () {
        return (
            <div>
                组件自己的值: {this.state.count}
                <br/>
                修改组件的值
                <button onClick={() => this.setState((pre) => ({ count: pre.count + 1 }))}>click</button>
            </div>
        );
    }
}
